import { Allotment } from 'allotment';
import { MenuContent } from './components/Menu';
import { CodeEditor } from './components/CodeEditor/index';
import { EduCodeEditor } from './components/CodeEditor/box';
import { ManagerPanel } from './components/ManagerPanel';
import { FlowEditor, ContextMenu } from 'codeck';
import 'allotment/dist/style.css';
import { useRef, useState } from 'react';
// import { useStage } from 'codeck/src/hooks/useStage';

export function App() {
  const [visible, setVisible] = useState(true);


  return (
    <div className="h-screen">

      <MenuContent />
      <Allotment snap={true}>
        <Allotment vertical={true} snap={true} >
          <Allotment vertical={true} snap={true}  >
            <FlowEditor />
          </Allotment>
          <Allotment.Pane preferredSize="20%" snap={true} visible={visible}>
            <div style={{ marginLeft: 30, height: 100 + "%" }}>
              <CodeEditor />
            </div>
          </Allotment.Pane >
        </Allotment>
        <Allotment.Pane preferredSize="20%" snap={true} visible={visible}>
          <div style={{ marginTop: 52, height: 'calc(100% - 52px)', }}>
            <Allotment vertical={true} snap={true}>
              <ManagerPanel />
              <ContextMenu />
            </Allotment>
          </div>
        </Allotment.Pane >
      </Allotment>
    </div>
  );
}


export function EduApp() {
  const [visible, setVisible] = useState(true);


  return (
    <div className="h-screen">
      <Allotment snap={true}>
        <Allotment vertical={true} snap={true} >
          <Allotment vertical={true} snap={true}  >
            <FlowEditor />
          </Allotment>
        </Allotment>
        <Allotment.Pane preferredSize="20%" snap={true} visible={visible}>

          <Allotment vertical={true} snap={true}>
            <ManagerPanel />
            <ContextMenu />
          </Allotment>

        </Allotment.Pane >
      </Allotment>
      <EduCodeEditor />
    </div>
  );
}

